<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <div id="ex3" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
    Найдем в этом тексте слово "бабуля" и подсветим его синим фоном
  </div>
  <div>
    <input onclick="domRangehighlight('бабуля'); this.style.display = 'none';" type="button" value="Найти!">
  </div>
  <script>
    function domRangehighlight(text) {
      var root = document.getElementById('ex3').firstChild;
      var content = root.nodeValue;
      if (~content.indexOf(text)) {
        if (document.createRange) {
          var rng = document.createRange();
          rng.setStart(root, content.indexOf(text));
          rng.setEnd(root, content.indexOf(text) + text.length);
          var highlightDiv = document.createElement('span');
          highlightDiv.style.backgroundColor = 'blue';
          rng.surroundContents(highlightDiv);
        } else
          alert('Вероятно, у вас IE8-, смотрите реализацию TextRange ниже');
      } else
        alert('Совпадений не найдено');
    }
  </script>

</body>

</html>